<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard调试页面</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .debug-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .button:hover {
            background: #40a9ff;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }
        .error {
            background: #fff2f0;
            border: 1px solid #ffccc7;
            color: #ff4d4f;
        }
        .info {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            color: #1890ff;
        }
    </style>
</head>
<body>
    <div class="debug-panel">
        <h2>🔍 Dashboard调试工具</h2>
        <p>这个页面帮助诊断dashboard页面空白的问题</p>
        
        <div id="status"></div>
        
        <h3>操作按钮</h3>
        <button class="button" onclick="setTestToken()">设置测试Token</button>
        <button class="button" onclick="clearToken()">清除Token</button>
        <button class="button" onclick="checkToken()">检查Token状态</button>
        <button class="button" onclick="testAPI()">测试API连接</button>
        <button class="button" onclick="goToDashboard()">跳转到Dashboard</button>
        <button class="button" onclick="goToLogin()">跳转到登录页</button>
        
        <h3>系统信息</h3>
        <div id="system-info"></div>
        
        <h3>控制台日志</h3>
        <div id="console-logs" style="background: #f8f8f8; padding: 10px; border-radius: 4px; font-family: monospace; max-height: 300px; overflow-y: auto;"></div>
    </div>
    
    <script>
        // 捕获控制台日志
        const originalLog = console.log;
        const originalError = console.error;
        const originalWarn = console.warn;
        
        function addLogToDisplay(type, message) {
            const logsDiv = document.getElementById('console-logs');
            const timestamp = new Date().toLocaleTimeString();
            logsDiv.innerHTML += `<div style="color: ${type === 'error' ? 'red' : type === 'warn' ? 'orange' : 'black'}"><strong>[${timestamp}] ${type.toUpperCase()}:</strong> ${message}</div>`;
            logsDiv.scrollTop = logsDiv.scrollHeight;
        }
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            addLogToDisplay('log', args.join(' '));
        };
        
        console.error = function(...args) {
            originalError.apply(console, args);
            addLogToDisplay('error', args.join(' '));
        };
        
        console.warn = function(...args) {
            originalWarn.apply(console, args);
            addLogToDisplay('warn', args.join(' '));
        };
        
        function updateStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }
        
        function setTestToken() {
            localStorage.setItem('admin_token', 'test-token-' + Date.now());
            updateStatus('✅ 测试Token已设置', 'success');
            checkToken();
        }
        
        function clearToken() {
            localStorage.removeItem('admin_token');
            updateStatus('🗑️ Token已清除', 'info');
            checkToken();
        }
        
        function checkToken() {
            const token = localStorage.getItem('admin_token');
            if (token) {
                updateStatus(`✅ Token存在: ${token}`, 'success');
            } else {
                updateStatus('❌ 没有找到Token', 'error');
            }
        }
        
        async function testAPI() {
            try {
                updateStatus('🔄 正在测试API连接...', 'info');
                const response = await fetch('/api/admin/dashboard/stats');
                if (response.ok) {
                    const data = await response.json();
                    updateStatus('✅ API连接成功，数据获取正常', 'success');
                    console.log('API响应数据:', data);
                } else {
                    updateStatus(`❌ API请求失败: ${response.status} ${response.statusText}`, 'error');
                }
            } catch (error) {
                updateStatus(`❌ API连接错误: ${error.message}`, 'error');
                console.error('API测试错误:', error);
            }
        }
        
        function goToDashboard() {
            console.log('跳转到Dashboard页面');
            window.location.href = '/dashboard';
        }
        
        function goToLogin() {
            console.log('跳转到登录页面');
            window.location.href = '/login';
        }
        
        function updateSystemInfo() {
            const info = {
                'User Agent': navigator.userAgent,
                '当前URL': window.location.href,
                '本地存储支持': typeof(Storage) !== "undefined" ? '✅' : '❌',
                'React开发模式': window.location.hostname === 'localhost' ? '✅' : '❌',
                '时间戳': new Date().toLocaleString()
            };
            
            let infoHTML = '';
            for (const [key, value] of Object.entries(info)) {
                infoHTML += `<p><strong>${key}:</strong> ${value}</p>`;
            }
            
            document.getElementById('system-info').innerHTML = infoHTML;
        }
        
        // 页面加载时执行
        window.addEventListener('load', () => {
            console.log('🚀 Dashboard调试页面加载完成');
            updateSystemInfo();
            checkToken();
        });
        
        // 监听错误
        window.addEventListener('error', (event) => {
            console.error('页面错误:', event.error);
        });
        
        window.addEventListener('unhandledrejection', (event) => {
            console.error('未处理的Promise拒绝:', event.reason);
        });
    </script>
</body>
</html>